<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="parentScoreCardList" value="${requestScope.parentScoreCardList}" />
<c:set var="dimensionalCutsMembers" value="${requestScope.dimensionalCutsMembers}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>
            <title><fmt:message key="login.title.tag" /></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <jsp:include page="menu/header.jsp">
                <jsp:param name="v" value="login" />
            </jsp:include>

            <!-- tabbed panels-->
            <link href="jsp/css/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
            <script src="jsp/js/SpryTabbedPanels.js" type="text/javascript"></script>
            <script type="text/javascript" src="jsp/js/jquery.treeview.js"></script>

            <link href="jsp/css/wizard.css" rel="stylesheet" type="text/css" />
            <link href="jsp/css/screen.css" rel="stylesheet" type="text/css" />
            <link href="jsp/css/jquery.treeview.css" rel="stylesheet" type="text/css" />

            <script type="text/javascript">
                $(document).ready(function(){
                    $(".buttonCancelTabbedBox").click(function()
                    {
                        parent.$.fn.colorbox.close();
                    });

                    $("#newDimensionContainer").treeview();

                    $("#newDimensionContainer button").live("click",function()
                    {
                        var dimensionBranch = $('<li style="background-color:#def; opacity:0.5;"><input type="hidden" name="parentDimension" value="1" />'+
                            '   <label for="newDimensionMember">Nombre de miembro:</label>'+
                            '   <input type="text" name="newDimensionMember" class="designerWizardInput" /></li>').appendTo($(this).parent("li").parent("ul"));
                        var addNewMemberBranch = $('<ul><li class="addDimensionMemberLink"><a href="#">Agregar miembro</a></ul></li>').appendTo(dimensionBranch);
                        var memberBranch = $('<li class="addDimensionMemberLink"><a href="#">Agregar miembro</a></li></ul>').appendTo($(this).parent("li").parent("ul"));
                        $(this).parent("li").parent("ul").treeview({add:dimensionBranch});
                        $(this).parent("li").parent("ul").treeview({add:addNewMemberBranch});
                        $(this).parent("li").remove();
                        dimensionBranch.animate( { opacity: 1.0, backgroundColor: '#fff' }, 1000);
                    });

                    $("#filterScoreCards").click(function() {
                        $("#parentScoreCardID").val($("#parentScoreCard").val());
                        $("#childrenScoreCardContainer option[value="+$("#parentScoreCard").val()+"]").remove();
                        $("#childrenScoreCardContainer").css("display","table-row")
                        var parent = $('<li><ul>'+
                            '<li><span>'+$("#parentScoreCard option:selected").text()+'</span></li>'+
                            '<li><span style="font-style:italic">Tipo: LoremIpsum</span></li>'+
                            +'</ul></li>').appendTo($("#newDimensionContainer"));
                        $("#newDimensionContainer").treeview({add:parent});
                        $("#parentScoreCard").attr("disabled","disabled");
                        $(this).remove();
                    });

                    $("#relateScoreCards").click(function() {
                        var scorecard = $('<li><ul>'+
                            '<li><span>'+$("#childrenScoreCardContainer option:selected").text()+'</span></li>'+
                            '<li><span style="font-style:italic">Tipo: LoremIpsum</span></li>'+
                            '<li><span>Factor Porcentual: </span><input type="text" name="percentFactor_'+$("#childrenScoreCardContainer option:selected").val()+'" class="designerWizardInput" style="width:75px !important"></li>'+
                            '<input type="hidden" name="childrenScoreCard" value="'+$("#childrenScoreCardContainer option:selected").val()+'" />'+
                            '</ul></li>').appendTo($("#newDimensionContainer"));
                        $("#childrenScoreCardContainer option:selected").remove();
                        $("#newDimensionContainer").treeview({add:scorecard});
                    });

                });
            </script>

        </head>
        <body style="overflow:hidden; background:#fff;">
            <form id="AddUser" action="addScoreCardRelation.do" method="post">

                <div class="wizard" style="height:380px; width:650px">
                    <h1>Establecer relaciones</h1>
                    <div id="dashboardPanels" class="TabbedPanels">

                        <div class="TabbedPanelsContentGroup" style="height:300px; overflow:auto;">

                            <div class="TabbedPanelsContent" >
                                <table style="table-layout:fixed; margin:10px auto;" width="80%">
                                    <tr>
                                        <td width="30%">
                                            <label for="parentScoreCard">ScoreCard Padre:</label>
                                        </td>
                                        <td width="40%">
                                            <select name="scoreCard" id="scoreCard" class="designerWizardInput" style="width:180px !important">

                                                <c:forEach items="${parentScoreCardList}" var="parentScorecard">
                                                    <option value="${parentScorecard.idScoreCard}">
                                                        <c:choose>
                                                            <c:when test="${parentScorecard.class.simpleName == 'DimensionalCut'}">
                                                                <c:set var="dimensionalCutMembers" value="${dimensionalCutsMembers[parentScorecard]}" />
                                                                ${parentScorecard.name} (${dimensionalCutMembers})
                                                            </c:when>
                                                            <c:otherwise>${parentScorecard.name}</c:otherwise>
                                                        </c:choose>

                                                    </option>
                                                </c:forEach>
                                            </select>
                                        </td>

                                    </tr>

                                </table>

                            </div>

                        </div>
                    </div>

                    <div class="errorDiv">

                    </div>
                    <div class="botonesWizard">
                        <input name="send" type="submit" id="send" class="buttonTabbedBox" value="Siguiente" />
                        <input name="Reset" type="reset" class="buttonCancelTabbedBox" value="Cancelar" />
                    </div>
                    <div class="clear"></div>
                </div>
            </form>
        </body>
    </fmt:bundle>
</html>

